<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>货名字典</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
      <a-row>
        <a-col :span="24">
          <a-form layout="inline">
            <a-form-item label="货名">
              <a-input v-model="searchForm.name" />
            </a-form-item>
            <a-form-item label="所属大类">
              <a-select v-model="searchForm.parentId" class="selectWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option v-for="v in bigClasses" :key="v.id">{{v.name}}</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="状态">
              <a-select v-model="searchForm.status" class="selectWidth">
                <a-select-option key>全部</a-select-option>
                <a-select-option :key="1">正常</a-select-option>
                <a-select-option :key="0">冻结</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleSubmit1">查询</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="openCreate">+ 创建货名</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="bigManage">大类维护</a-button>
            </a-form-item>
          </a-form>

          <a-table
            :columns="columns"
            :data-source="tableData"
            :loading="tloading"
            class="tableMargin"
            :pagination="pagination"
            rowKey="id"
          >
            <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
            <template slot="operation" slot-scope="text, record">
              <a @click="edit(record)">编辑</a>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </div>

    <a-modal v-if="form.parentId !== 0"
      :visible="visible"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
      centered destroyOnClose
    >
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="品种名称" prop="name">
          <a-input v-model="form.name" :max-length="20" />
        </a-form-model-item>
        <a-form-model-item label="所属大类" prop="parentId">
          <a-select v-model="form.parentId" class="selectWidth">
            <a-select-option key>请选择</a-select-option>
            <a-select-option v-for="v in bigClasses" :key="v.id">{{v.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-select v-model="form.status">
            <a-select-option :key="1">正常</a-select-option>
            <a-select-option :key="0">冻结</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

    <!-- 大类维护modal -->
    <a-modal
      :visible="visible2"
      title="大类维护"
      :footer="null"
      centered destroyOnClose
      width="600px"
      @cancel="handleCancel2"
    >
      <a-button type="primary" @click="openCreate2()">+  添加大类</a-button>
      <a-table
        :columns="columns2"
        :data-source="tableData2"
        :pagination="false"
        rowKey="id"
      >
        <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
        <template slot="operation" slot-scope="text, record">
          <a @click="editModal(record)">编辑</a>
          <a @click="deleteIt(record)">删除</a>
        </template>
      </a-table>

      <a-modal v-if="form.parentId === 0"
        :visible="visible"
        :title="title"
        @ok="handleOk"
        @cancel="handleCancel"
        centered destroyOnClose
      >
        <a-form-model
          ref="form"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="大类名称" prop="name">
            <a-input v-model="form.name" :max-length="20" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>

    </a-modal>
  </div>
</template>

<script>
import { insertGoodsData, deleteGoodsData, updateGoodsData, queryGoodsData, checkGoodsName } from '@/api/systemPersonnelManage'

const fomrMessage = `必填项不能为空`
const defaultForm = (parentId = '') => ({
  id: null,
  name: '',
  parentId,
  status: 1
})

export default {
  data () {
    const validateName = (rule, value, callback) => {
      checkGoodsName({name: value, parentId: this.form.parentId, id: this.form.id}).then(rsp => {
        if (rsp.data) {
          callback(new Error(this.form.parentId === 0 ? '该大类已存在' : '该货名已存在'))
        } else {
          callback()
        }
      })
    }

    return {
      searchForm: {
        name: '',
        parentId: '',
        status: ''
      },
      tloading: false,
      bigClasses: [],
      title: '创建货名',
      columns: [
        {
          title: '序号',
          width: 60,
          scopedSlots: { customRender: 'rn' }
        },
        {
          title: '所属大类',
          dataIndex: 'parentName'
        },
        {
          title: '货名',
          dataIndex: 'name'
        },
        {
          title: '状态',
          dataIndex: 'status',
          customRender: (text, row, index) => {
            if (text === 1) {
              return <a-badge status="success" text="正常" />
            } else if (text === 0) {
              return <a-badge status="error" text="冻结" />
            }
          }
        },
        {
          title: '操作',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      columns2: [
        {
          title: '序号',
          width: 60,
          scopedSlots: { customRender: 'rn' }
        },
        {
          title: '大类名称',
          dataIndex: 'name'
        },
        {
          title: '下属货名数量',
          dataIndex: 'number'
        },
        {
          title: '操作',
          width: 100,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      tableData: [],
      tableData2: [],
      pagination: false,
      pageNum: 1,
      pageSize: 10,
      visible: false,
      visible2: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      form: defaultForm(),
      rules: {
        name: [{ required: true, message: fomrMessage, trigger: 'blur' }, {validator: validateName, trigger: 'blur'}],
        parentId: [{ required: true, message: fomrMessage, trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      this.tloading = true
      queryGoodsData({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tloading = false
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      }).catch(() => { this.tloading = false })
    },
    initBigClass () {
      queryGoodsData({
        ...this.searchForm,
        parentId: 0,
        status: 1,
        pageNum: 1,
        pageSize: 999
      }).then(rsp => {
        this.tableData2 = rsp.data.list
        this.bigClasses = rsp.data.list
      })
    },
    edit (obj) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      this.form = obj
      this.title = '编辑货名'
      this.visible = true
    },
    editModal (obj) {
      this.form = obj
      this.title = '编辑货名'
      this.visible = true
    },
    openCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.form = defaultForm()
      this.title = '创建货名'
      this.visible = true
    },
    openCreate2 () {
      this.form = defaultForm(0)
      this.title = '创建大类'
      this.visible = true
    },
    bigManage () {
      if (!this.$root._bc.classMaintain) {
        this.$message.error('您无此权限！')
        return
      }
      this.initBigClass()
      this.visible2 = true
    },
    deleteIt (record) {
      if (record.number > 0) {
        this.$message.error('大类下所属货名为0时，可以删除')
      } else {
        deleteGoodsData({id: record.id}).then(rsp => {
          this.$message.success('删除成功')
          this.initBigClass()
        })
      }
    },
    handleOk () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateGoodsData(this.form).then(rsp => {
              this.$message.success('编辑成功')
              this.handleSubmit()
              this.initBigClass()
              this.visible = false
            })
          } else {
            insertGoodsData(this.form).then(rsp => {
              this.$message.success('创建成功')
              this.handleSubmit()
              this.initBigClass()
              this.visible = false
            })
          }
        }
      })
    },
    handleCancel () {
      this.visible = false
    },
    handleCancel2 () {
      this.visible2 = false
    }
  },
  created () {
    this.initBigClass()
    this.handleSubmit()
  }
}
</script>

<style lang="less" scoped>
</style>
